<template>
	<view class="content">
		<openAlert ref="openAlert" closeBtn CloseImage="close-position" :CustomPosition="CustomPosition">
			<scroll-view class="info" scroll-y>
				<view class="info-text">报名信息</view>
				<form @submit="pay">
					<view class="sign-row">
						<view class="sign-label">姓名:</view>
						<input type="text" @blur="names()" v-model="list.name" placeholder="请输入您的姓名" />
					</view>
					<view class="sign-row">
						<view class="sign-label">手机号码:</view>
						<input type="number" @blur="phoneshow()" maxlength="11" v-model="list.tel" placeholder="请输入您的手机号码" />
					</view>

					<block v-for="(item, index) in extra_field_arr" :key="index">
						<block v-if="item.type.key == 'string'">
							<view class="sign-row">
								<view class="sign-label">{{ item.toast }}:</view>
								<input type="text" :value="item.value" :name="item.name" :placeholder="'请输入' + item.toast" />
							</view>
						</block>
						<block v-if="item.type.key == 'textarea'">
							<view class="sign-row-manyimg">
								<view class="sign-label">{{ item.toast }}:</view>
								<textarea type="text" :value="item.value" :name="item.name" :placeholder="'请输入' + item.toast"></textarea>
							</view>
						</block>
						<block v-if="item.type.key == 'oneimg'">
							<view class="sign-row-manyimg">
								<view class="sign-label">{{ item.toast }}:</view>
								<view>
									<input :name="item.name" v-model="form_arr[index]" style="display: none;" />
									<image v-if="form_arr[index]" :src="form_arr[index]" style="width: 100rpx; height: 100rpx;" @click="add_one_image(index)"></image>
									<image v-else src="../static/add1.png" style="width: 100rpx; height: 100rpx;" @click="add_one_image(index)"></image>
								</view>
							</view>
						</block>
						<block v-else-if="item.type.key == 'manyimg'">
							<view class="sign-row-manyimg">
								<view class="sign-label">{{ item.toast }}:</view>
								<view>
									<input :name="item.name" v-model="form_arr[index]" style="display: none;" />
									<block v-if="form_arr[index]">
										<image v-for="(item2, index2) in image_list_arr" :key="index2" :src="item2" style="width: 100rpx; height: 100rpx;"></image>
									</block>
									<image src="../static/add1.png" style="width: 100rpx; height: 100rpx;" @click="add_image(index)"></image>
								</view>
							</view>
						</block>
						<block v-else-if="item.type.key == 'radio'">
							<view class="sign-row-radio">
								<view class="sign-label">{{ item.toast }}:</view>
								<view class="sign-value">
									<radio-group :name="item.name">
										<block v-for="(item2, index2) in item.radioitem" :key="index2">
											<radio :value="item2.key">{{ item2.key }}</radio>
										</block>
									</radio-group>
								</view>
							</view>
						</block>
					</block>

					<button form-type="submit" class="pay" v-if="need_pay == 1">支付{{ price }}元报名</button>
					<button form-type="submit" class="pay" v-else>立即提交</button>
				</form>
				<view class="pay-text">*仅限家具经销商报名有效，消费者和厂家等经审核无效。</view>
			</scroll-view>
		</openAlert>
	</view>
</template>

<script>
import openAlert from '@/components/open-alert/open-alert';
export default {
	components: {
		openAlert
	},
	data() {
		return {
			shadeClose: true,
			clo: true,
			AlertClass: 0,
			AlertPosition: 'alert-position',
			CustomPosition: {
				top: '100rpx'
			},
			list: {
				name: '',
				tel: ''
			},
			extra_field_arr: [],
			form_arr: [],
			image_list_arr: [],
			pic_list: ''
		};
	},
	props: {
		pid: {
			type: Number,
			default: 0
		},
		staff_id: {
			type: Number,
			default: 0
		},
		activity_id: {
			type: Number,
			default: 0
		},
		extra_field: {
			type: String,
			default: ''
		},
		need_pay: {
			type: Number,
			default: 1
		},
		price: {
			type: String,
			default: '0.01'
		},
		last_enter_info: {
			type: Object,
			default: function() {
				return {};
			}
		},
		is_history:{
			type:Number,
			default:0
		}
	},
	mounted() {
		this.init_form()
	},
	watch:{
		last_enter_info(){
			this.init_form()
		},
		is_history(val){
			this.is_history = val
		}
	},
	methods: {
		init_form(){
			this.list.tel = this.last_enter_info.tel;
			this.list.name = this.last_enter_info.name;
			let extra_field_value = this.last_enter_info.extra_field_value;
			if (this.extra_field) {
				this.extra_field_arr = JSON.parse(this.extra_field);
				
				for (let i = 0; i < this.extra_field_arr.length; i++) {
					if (extra_field_value[this.extra_field_arr[i]['name']]) {
						this.extra_field_arr[i]['value'] = extra_field_value[this.extra_field_arr[i]['name']];
					}else{
						this.extra_field_arr[i]['value'] = '';
					}
				}
			}
		},
		//弹出层
		open(Class, Position) {
			this.$refs.openAlert.Show();
		},
		//手机号正则
		phoneshow() {
			var reg = 11 && /^1(2|3|4|5|6|7|8|9)\d{9}$/; //手机号正则验证
			var phoneNum = this.list.tel;
			if (!phoneNum) {
				//未输入手机号
				uni.showToast({
					title: '请输入你的手机号码',
					make: 'true',
					icon: 'none'
				});
				return false;
			}
			if (!reg.test(phoneNum)) {
				//手机号不合法
				uni.showToast({
					title: '您输入的手机号码不合法，请重新输入',
					make: 'true',
					icon: 'none'
				});
				return false;
			} else {
			}
		},
		//姓名正则
		names() {
			// var pattern = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;
			var name = this.list.name;
			if (!name) {
				uni.showToast({
					title: '请输入你的名字',
					make: 'true',
					icon: 'none'
				});
				return false;
			}
		},
		add_image(index) {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album'],
				success: res => {
					// console.log(res,999)
					this.$comm.ossUpFile(res.tempFiles[0], url => {
						if (this.form_arr[index] == '' || this.form_arr[index] == undefined) {
							this.form_arr[index] = url;
						} else {
							this.form_arr[index] = this.form_arr[index] + ',' + url;
						}
						this.image_list_arr.push(url);

						this.$forceUpdate();
					});
				}
			});
		},
		add_one_image(index) {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album'],
				success: res => {
					this.$comm.ossUpFile(res.tempFiles[0], url => {
						this.form_arr[index] = url;
						this.$forceUpdate();
					});
				}
			});
		},
		//支付
		pay(e) {
			if (this.names() == false) {
				return;
			}
			if (this.phoneshow() == false) {
				return;
			}

			let form_data = e.detail.value;

			for (let property in form_data) {
				for (let i = 0; i < this.extra_field_arr.length; i++) {
					if (this.extra_field_arr[i].name == property) {
						if (this.extra_field_arr[i].necessary == true) {
							if (form_data[property] == '') {
								uni.showToast({
									title: this.extra_field_arr[i].toast + '不能为空',
									icon: 'none'
								});
								return false;
							}
						}
					}
				}
			}

			let extra_field_value = JSON.stringify(e.detail.value);

			if (this.need_pay) {
				this.$comm.request({
					url: 'api/invite_register',
					method: 'POST',
					data: {
						pid: this.pid,
						staff_id: this.staff_id,
						activity_id: this.activity_id,
						name: this.list.name,
						tel: this.list.tel,
						extra_field_value: extra_field_value,
						is_history:this.is_history
					},
					success: res => {
						this.$refs.openAlert.Close();
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});

						//return false;

						WeixinJSBridge.invoke(
							'getBrandWCPayRequest',
							{
								appId: res.data.result.appId, //公众号名称，由商户传入
								timeStamp: res.data.result.timeStamp, //时间戳，自1970年以来的秒数
								nonceStr: res.data.result.nonceStr, //随机串
								package: res.data.result.package,
								signType: res.data.result.signType, //微信签名方式：
								paySign: res.data.result.paySign //微信签名
							},
							res => {
								if (res.err_msg == 'get_brand_wcpay_request:ok') {
									// 使用以上方式判断前端返回,微信团队郑重提示：
									//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
									//app.globalData.user_info.is_vip = this.user_info.is_vip = 1
									this.$refs.openAlert.Close();
									this.$emit('change');
									uni.showToast({
										title: '报名成功!',
										duration: 2000
									});
								}
							}
						);
					},
					fail: res => {},
					complete: res => {}
				});
			} else {
				this.$comm.request({
					url: 'api/invite_register2',
					method: 'POST',
					data: {
						pid: this.pid,
						staff_id: this.staff_id,
						activity_id: this.activity_id,
						name: this.list.name,
						tel: this.list.tel,
						extra_field_value: extra_field_value,
						is_history:this.is_history
					},
					success: res => {
						this.$refs.openAlert.Close();
						this.$emit('change');
						uni.showToast({
							title: '报名成功!',
							duration: 2000
						});
					}
				});
			}
		}
	}
};
</script>

<style lang="less" scoped>
.info {
	z-index: 9999;
	border-radius: 20rpx;
	background-color: white;
	width: 620rpx;
	padding-bottom: 20rpx;
	max-height: 980rpx;

	.info-text {
		text-align: center;
		font-weight: bold;
		padding: 20rpx 0;
		font-size: 35rpx;
	}

	.info-name {
		font-size: 30rpx;
		display: flex;
		// margin-left: 50rpx;
		margin: 40rpx 20rpx;
		align-items: center;
		input {
			margin-left: 30rpx;
			font-size: 30rpx;
		}
		view {
			// letter-spacing:2em;

			width: 130rpx;
		}
	}

	.striping {
		height: 1rpx;
		width: 100%;
		background-color: #c0c0c0;
	}

	.info-phone {
		font-size: 30rpx;
		display: flex;
		// margin-left: 50rpx;
		margin: 40rpx 20rpx;
		align-items: center;
		// justify-content: space-between;
		input {
			margin-left: 30rpx;
			font-size: 30rpx;
		}
		view {
			width: 130rpx;
			// width: 250rpx;
		}
	}

	.pay {
		width: 90%;
		background-color: #4a69ff;
		color: white;
		border-radius: 50rpx;
		margin-left: 5%;
		text-align: center;
		margin-top: 50rpx;
		font-size: 32rpx;
		height: 90rpx;
		line-height: 90rpx;
	}

	.pay-text {
		font-size: 25rpx;
		color: #4a69ff;
		text-align: center;
		margin-top: 30rpx;
		margin-bottom: 60rpx;
	}

	.free {
		width: 90%;
		color: #b3b3b3;
		border-radius: 50rpx;
		margin-left: 5%;
		text-align: center;
		padding: 20rpx 0;
		border: 1rpx solid #b3b3b3;
		margin-top: 50rpx;
	}

	.free-text {
		font-size: 25rpx;
		color: #b3b3b3;
		text-align: center;
		margin-top: 20rpx;
		padding-bottom: 50rpx;
	}

	.foot {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 30rpx;

		image {
			height: 100rpx;
			width: 100rpx;
			z-index: 9999;
			margin: 20rpx 0;
		}
	}
	.sign-row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 80rpx;
		align-items: center;
		border-bottom: 1px solid #efefef;
		padding: 0 20rpx;

		input {
			width: 480rpx;
		}
	}

	.sign-row-radio {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 0 20rpx;
		line-height: 80rpx;
		radio {
			margin-right: 30rpx;
			font-size: 26rpx;
		}
		border-bottom: 1px solid #efefef;
		padding-bottom: 10rpx;
		padding-top: 10rpx;
	}

	.sign-row-manyimg {
		line-height: 80rpx;
		border-bottom: 1px solid #efefef;
		padding: 0 20rpx;
		image {
			padding: 10rpx;
			margin-left: 20rpx;
			border: 1px solid #efefef;
		}
		textarea {
			height: 200rpx;
		}
	}

	.sign-label {
		display: flex;
		justify-content: space-between;
		font-weight: bold;
		font-size: 30rpx;
		width: 200rpx;
	}
	.sign-value {
		width: 480rpx;
		line-height: 40rpx;
	}
}
</style>
